<template>
  <div class="app-container-trans">
    <div class="tree_control">
      <div class="title">{{ $t('organization.org') }}</div>
      <el-tree ref="way_tree" :data="orgTree" node-key="id" default-expand-all :expand-on-click-node="false" @node-click="nodeClick" />
    </div>
    <div class="container">
      <el-form ref="formSearch" :model="searchForm" label-width="100px">
        <el-row>
          <el-col :span="19">
            <el-row class="form_table">
              <el-col :span="8">
                <el-form-item :label="$t('organization.orgParentName')" prop="orgParentCode">
                  <el-select v-model="searchForm.orgParentCode" clearable :placeholder="$t('placeholder.select')">
                    <el-option v-for="item in orgParentList" :key="item.orgCode" :label="item.orgName" :value="item.orgCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('organization.orgCode')" prop="orgCode">
                  <el-input v-model.trim="searchForm.orgCode" clearable />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item :label="$t('organization.orgName')" prop="orgName">
                  <el-input clearable v-model="searchForm.orgName" />
                </el-form-item>
              </el-col>-->
              <!--
              <el-col :span="8">
                <el-form-item :label="$t('organization.outOrgCode')" prop="outOrgCode">
                  <el-input clearable v-model="searchForm.outOrgCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('organization.outOrgParentCode')" prop="outOrgParentCode">
                  <el-input clearable v-model="searchForm.outOrgParentCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('organization.orgType')" prop="orgType">
                  <el-input clearable v-model="searchForm.orgType" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('organization.orgType')" prop="orgType">
                  <el-select clearable v-model="searchForm.orgType" :placeholder="$t('placeholder.select')">
                    <el-option v-for="item in orgTypes" :key="item.id" :label="item.text" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('organization.linkman')" prop="linkman">
                  <el-input clearable v-model="searchForm.linkman" />
                </el-form-item>
              </el-col>
              -->
              <el-col :span="8">
                <el-form-item :label="$t('businessGlossary.enabled')" prop="enabled">
                  <el-select v-model="searchForm.enabled" clearable :placeholder="$t('placeholder.select')">
                    <el-option v-for="item in $enableDict" :key="item.id" :label="item.text" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5" style="text-align: center">
            <el-button
              type="primary"
              @click="
                searchForm.pageNumber = 1
                getData()
              "
            >{{ $t('btn.query') }}</el-button>
            <el-button type="danger" @click="resetForm('formSearch')">{{ $t('btn.reset') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-button v-permission="'gaeaOrgController#insert'" type="primary" icon="el-icon-plus" @click="openCreateUser">{{ $t('btn.add') }}</el-button>
      <el-button v-permission="'gaeaOrgController#update'" type="primary" icon="el-icon-edit" :disabled="selectedList.length != 1" @click="editDetail('edit', null)">{{ $t('btn.edit') }}</el-button>
      <delete-btn v-permission="'gaeaOrgController#deleteBatchIds'" :disabled="selectedList.length < 1" @handleDelete="handleDelete" />
      <el-table :data="tableList" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all @selection-change="handleSelectionChange">
        <!-- :tree-props="{children: 'children'}"> -->
        <el-table-column fixed type="selection" width="50" align="center" />
        <el-table-column :label="$t('organization.orgCode')" align="center" min-width="180">
          <template slot-scope="scope">
            <span class="view" @click="editDetail('view', scope.row)">{{ scope.row.orgCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orgName" :label="$t('organization.orgName')" min-width="140" align="center" />
        <el-table-column prop="orgParentCode" :label="$t('organization.orgParentCode')" min-width="200" align="center" />
        <el-table-column prop="orgParentName" :label="$t('organization.orgParentName')" min-width="200" align="center" />
        <el-table-column prop="enabled" :label="$t('businessGlossary.enabled')" min-width="90" align="center">
          <template slot-scope="scope">
            <span>{{ $t(`businessGlossary.enabled${scope.row.enabled}`) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" :label="$t('organization.remark')" :show-overflow-tooltip="true" max-width="220" align="center" />
        <el-table-column prop="createTime" :label="$t('businessGlossary.creationTime')" align="center" min-width="160" />
        <el-table-column prop="createByView" :label="$t('businessGlossary.creator')" align="center" min-width="160" />
        <el-table-column prop="updateTime" :label="$t('businessGlossary.modifyTime')" align="center" min-width="180" />
        <el-table-column prop="createByView" :label="$t('businessGlossary.modifyUser')" align="center" min-width="140" />
      </el-table>
      <el-pagination v-show="total > 0" background :current-page.sync="searchForm.pageNumber" :page-sizes="$pageSizeAll" :page-size="searchForm.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog :title="$t(`btn.${dialogTittle}`)" width="50%" :close-on-click-modal="false" center :visible.sync="basicDialog" @close="closeDialog">
      <el-form ref="userForm" :model="dialogForm" :rules="formRules" label-width="130px" :disabled="dialogTittle == 'view'">
        <el-row class="form_table">
          <el-col :span="12">
            <el-form-item :label="$t('organization.orgCode')" prop="orgCode">
              <el-input v-model.trim="dialogForm.orgCode" clearable :disabled="dialogTittle != 'add'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.orgName')" prop="orgName">
              <el-input v-model.trim="dialogForm.orgName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.orgParentName')" prop="orgParentCode">
              <el-select v-model.trim="dialogForm.orgParentCode" clearable filterable :placeholder="$t('placeholder.select')">
                <el-option v-for="item in orgParentList" :key="item.orgCode" :label="item.orgName" :value="item.orgCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.outOrgCode')" prop="outOrgCode">
              <el-input v-model.trim="dialogForm.outOrgCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.outOrgParentCode')" prop="outOrgParentCode">
              <el-input v-model.trim="dialogForm.outOrgParentCode" clearable />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('organization.orgLevel')" prop="orgLevel">
              <el-input clearable v-model.trim="dialogForm.orgLevel" />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item :label="$t('organization.orgLevel')" prop="orgLevel">
              <el-select v-model="dialogForm.orgLevel" clearable :placeholder="$t('placeholder.select')">
                <el-option v-for="item in orgLevels" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('organization.orgType')" prop="orgType">
              <el-input clearable v-model.trim="dialogForm.orgType" />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item :label="$t('organization.orgType')" prop="orgType">
              <el-select v-model="dialogForm.orgType" clearable :placeholder="$t('placeholder.select')">
                <el-option v-for="item in orgTypes" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.linkman')" prop="linkman">
              <el-input v-model.trim="dialogForm.linkman" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.mobilePhone')" prop="mobilePhone">
              <el-input v-model.trim="dialogForm.mobilePhone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.telephone')" prop="telephone">
              <el-input v-model.trim="dialogForm.telephone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('businessGlossary.enabled')" prop="enabled">
              <el-select v-model="dialogForm.enabled" clearable :placeholder="$t('placeholder.select')">
                <el-option v-for="item in $enableDict" :key="item.id" :label="item.text" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('organization.remark')" prop="remark">
              <el-input v-model.trim="dialogForm.remark" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button v-if="dialogTittle != 'view'" type="primary" plain @click="confirm">{{ $t('btn.confirm') }}</el-button>
        <el-button type="danger" plain @click="basicDialog = false">{{ $t('btn.close') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrgList, addOrg, editOrg, deleteOrgs, getParentOrgList, getOrgTree } from '@/api/organization'
import { dataDictionary } from '@/api/common'
export default {
  name: 'Organization', // 此name必须与路由中的name字段相同才会被keep-alive组件缓存
  data() {
    return {
      orgTree: [], // 组织架构树绑定列表
      orgTypes: [],
      orgLevels: [],
      selectedList: [],
      orgParentList: [], // 上级 组织下拉列表
      searchForm: {
        orgCode: null,
        orgName: null,
        outOrgCode: null,
        orgParentCode: null,
        outOrgParentCode: null,
        orgType: null,
        linkman: null,
        enableFlag: null,
        code: null,
        pageNumber: 1,
        pageSize: 10,
      },
      tableList: [],
      total: 0,
      dialogTittle: 'view',
      basicDialog: false,
      dialogForm: {
        orgCode: null,
        orgName: null,
        orgParentCode: null,
        orgParentName: null,
        outOrgCode: null,
        outOrgParentCode: null,
        orgLevel: null,
        orgType: null,
        linkman: null,
        mobilePhone: null,
        telephone: null,
        enabled: 1,
        remark: null,
      },
      formRules: {
        orgCode: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        orgName: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        mobilePhone: [
          { required: false, message: this.$t('placeholder.input'), trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: this.$t('user.mobileVilid'), trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getTree()
    this.getData()
    this.getParentOrg()
  },
  methods: {
    // 点击tree节点时 将tree的id作为上级机构代码 查询列表
    nodeClick(d) {
      this.searchForm.code = d.id
      this.dialogForm.orgParentCode = d.id // id 应该为code
      this.getData()
    },
    // 获取侧边树结构
    async getTree() {
      const { code, data } = await getOrgTree()
      if (code != '200') return
      this.orgTree = data
    },
    // 获取系统级别
    async getLevel() {
      const { code, data } = await dataDictionary('ORG_LEVEL')
      if (code != '200') return
      this.orgLevels = data
      this.getType()
    },
    // 获取系统类型
    async getType() {
      const { code, data } = await dataDictionary('ORG_TYPE')
      if (code != '200') return
      this.orgTypes = data
    },
    // 获取系统父级机构
    async getParentOrg() {
      const { code, data } = await getParentOrgList()
      if (code != '200') return
      this.orgParentList = data
      this.getLevel()
    },
    // 提交按钮
    confirm() {
      this.$refs.userForm.validate(async(valid, obj) => {
        if (valid) {
          if (this.dialogTittle == 'add') {
            const { code } = await addOrg(this.dialogForm)
            if (code != '200') return
            this.closeDialog(true)
          } else {
            const { code } = await editOrg(this.dialogForm)
            if (code != '200') return
            this.closeDialog(true)
          }
        } else {
          return
        }
      })
    },
    // 关闭弹窗
    closeDialog(bool) {
      bool && this.getData() // 点确定关闭弹窗的时候才会刷新列表
      this.$refs['userForm'].resetFields()
      this.basicDialog = false
    },
    // 删除操作
    async handleDelete() {
      const ids = this.selectedList.map((item) => item.id)
      const { code } = await deleteOrgs(ids)
      if (code != '200') return
      this.getData()
    },
    // 新建操作
    openCreateUser() {
      this.dialogTittle = 'add' // 新建
      this.basicDialog = true
      console.log(this.dialogForm.orgParentCode)
    },
    // 编辑和查看操作
    editDetail(title, row) {
      this.dialogTittle = title
      this.basicDialog = true
      this.$nextTick(() => {
        this.dialogForm = JSON.parse(JSON.stringify(row || this.selectedList[0]))
      })
    },
    // 重置
    resetForm(formName) {
      // searchForm.orgParentCode
      this.$refs[formName].resetFields()
      // this.searchForm.pageNumber = 1
      this.tableList = []
      this.total = 0
      this.getData()
    },
    // 查询
    async getData() {
      const params = {
        ...this.searchForm,
        sort: 'update_time',
        order: 'DESC',
      }
      const { data, code } = await getOrgList(params)
      if (code != '200') return
      this.tableList = data.records
      this.total = data.total
    },
    // 选择项改变时
    handleSelectionChange(val) {
      this.selectedList = val
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = val
      this.getData()
    },
  },
}
</script>
